<template>
    <div class="RiskManagement">
        <el-container>
            <!--导航区-->
            <el-header style="height: 50px;">
                <div class="nav">
                    <div class="nav-left">
                        <p>项目</p>
                        <el-select v-model="value" placeholder="ABC综合体项目"  style="height: 30px;">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <p style="border-left:2px solid #fff; padding-left: 23px; margin-left: 23px;">
                            隐患管理</p>
                    </div>
                    <div class="nav-right">
                        <Weather></Weather>
                        <Date></Date>
                    </div>
                </div>
            </el-header>

            <!--菜单 + 内容区域-->
            <el-container style="background-color: #D9ECFF;padding-top: 18px;">
                <!--左侧菜单栏-->
                <el-aside width="260px">
                    <div
                        style="background-color: #F2F2F2;height: 40px;line-height:40px; text-align: left;padding-left: 20px;font-weight: bold;font-size: 15px">
                        高风险部门/建筑TOP10
                    </div>
                    <el-menu
                        index="/risk/RiskList"
                        mode="vertical"
                        :router="true"
                        default-active="/risk/RiskList"
                    >
                        <el-submenu
                            :router="true"
                            mode="vertical"
                            index="/alarm/AlarmAll"
                            default-active="/risk/RiskList"
                            style="text-align: left">
                            <template slot="title">ABC综合体</template>
                            <el-menu-item index="/risk/RiskList">全部</el-menu-item>
                            <el-menu-item index="/risk/ComplexOfficeBuilding">综合办公楼</el-menu-item>
                            <el-menu-item index="/risk/ProductionHouse">产线厂房</el-menu-item>
                            <el-menu-item index="/risk/WarehouseFloor">仓储楼</el-menu-item>
                            <el-menu-item index="/risk/ActivityCenter">活动中心</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main class="risk-container">
                    <div class="risk-management">
                      <RiskManagement></RiskManagement>
                    </div>
                    <div class="main-box">
                        <router-view></router-view>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import RiskManagement from '@/views/risk/RiskManagement'
import Weather from "@/views/fault/Weather";
import Date from "@/views/fault/Date";
import axios  from "axios";
export default {
    data:function (){
        return {
            options: [{
                value: '选项1',
                label: 'ABC综合体项目'
            }],
            value: '',
        }
    },
    components:{
        RiskManagement,
        Weather,
        Date
    }

}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}
i{
    color: #0A92FA;
    font-weight: bold;
}
.risk-container{
  display: flex;
  flex-direction: column;
  .risk-management {
    flex: 0 0 120px;
  }
  .main-box {
    flex: 1;
  }
}
.RiskManagement {
    height: 100%;
    .el-container {
        height: 100%;
        .el-header {
            height: 50px;
            .nav{
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                background-color: #3A4049;
                height: 50px;
                .nav-left {
                    width: 370px;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    p {
                        font-weight: 700;
                    }
                    .el-select{
                        /deep/.el-input--suffix{
                            width: 150px;
                            height: 35px;
                            line-height: 35px;
                        }
                        /deep/.el-input__inner{
                            width: 150px;
                            height: 35px;

                        }
                        /deep/.el-input__icon{
                            line-height: 35px;
                        }
                    }

                }
                .nav-right {
                    width: 311px;
                    display: flex;
                    justify-content: flex-start;
                }
            }
        }
        .el-aside {
            margin-bottom: 18px;
            background-color: #FFF;
        }
    }
    .main-box {
        overflow-y: auto;
        padding: 25px 20px;
        background-color: #FFF;
        margin: 0px 9px 18px;
    }
}

</style>